<template>
  <div>
    <h1 :style="{ background: bgColor }">
      {{ myTitle }}: {{ counter }}
    </h1>
    <span>{{ counter2 }}</span>
    <button @click="add">counter++</button>
    <button @click="jian">counter--</button>
  </div>
</template>

<script>
/*
* 父组件向子组件传值使用props，单向下行绑定
* 父级 prop 的更新会向下流动到子组件中，但是反过来则不行
*
* 1. 最好定义一个本地的 data property 并将这个 prop 用作其初始值
*
* */

export default {
  // 定义props的时候可以驼峰命名
  // props: ['bgColor', 'title'],
  props: {
    bgColor: String,
    // title: Number
    title: {
      type: Number,
      default: 1
      // required: true
    }
  },
  data() {
    return {
      counter: 0,
      // myTitle: this.title
    }
  },
  computed: {
    myTitle() {
      // return this.title * 10
      return this.title.toFixed(10)
    },
    counter2() {
      return '$' + this.counter.toFixed(2)
    }
  },
  methods: {
    add() {
      this.counter++
      // this.myTitle = 10000
    },
    jian() {
      this.counter--
      // this.title = 'props被修改了'
    }
  }
}
</script>
